<script setup lang="ts">
import { useRandomTestingStore } from '@/pages/RandomTesting/store'
import AnswerBox from '../AnswerBox/AnswerBox.vue'
import { StarOutlined, StarFilled } from '@ant-design/icons-vue'

const rootStore = useRandomTestingStore()
const { plainStore, renderQuestionStore } = rootStore
const { showAnswer, titleStyle, onToggleQuestionDoneStatus } = plainStore
const { title, answer, hasDone } = renderQuestionStore
</script>
<template>
  <div>
    <ACard style="margin-bottom: 16px">
      <div class="title-box">
        <div class="txt-box" :style="titleStyle">{{ title }}</div>
        <div class="icon-box" @click="onToggleQuestionDoneStatus">
          <StarOutlined v-if="!hasDone" class="not-done" />
          <StarFilled v-if="hasDone" class="done" />
        </div>
      </div>
    </ACard>
    <ACard v-show="showAnswer">
      <AnswerBox :answer="answer"></AnswerBox>
    </ACard>
  </div>
</template>

<style lang="less" scoped>
.title-box {
  font-size: 20px;
  font-weight: 600;
  box-sizing: border-box;
  color: rgba(0, 0, 0, 0.88);
  line-height: 1.4;
  display: flex;
  .txt-box {
    flex: auto;
  }
  .icon-box {
    flex: none;
    cursor: pointer;
    margin-left: 8px;
    .not-done {
      color: #bfbfbf;
    }
    .done {
      color: #fadb14;
    }
  }
}
</style>
